<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">设备管理</block>
		</cu-custom>
		<uni-search-bar placeholder="搜索" :radius="100" @confirm="search"></uni-search-bar>
		<y-list-item v-for="i in 5" class="list-item" title="跳转页面" to="/pages/parents/EquipmentManagement/set">
			<template #herder="{}">
				校门口设备
				<text class="status-icon ok">启用</text>
				<text class="status-icon no">禁用</text>
			</template>
			<view class="list-min-item">
				<text>应用场景</text>
				<text>应用场景</text>
			</view>
			<view class="list-min-item">
				<text>应用场景</text>
				<text>应用场景</text>
			</view>
		</y-list-item>
	</view>
</template>

<script>
	import yListItem from "@/y-ui/y-list-item/y-list-item.vue";
	export default {
		components:{
			yListItem
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.list-item {
		margin: 20rpx;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.list-min-item {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-left: .2em;

			text {
				width: 50%;
				font-size: 32rpx;
				color: #808080;
			}
		}

		.status-icon {
			font-size: .8em;
			border: 1px solid;
			border-radius: 8rpx;
			line-height: 1.5em;
			height: 1.6em;
			display: inline-block;
			padding: 0 .5em;
			color: #fff;
			margin-left: .5em;

			&.ok {
				border-color: #06AD56;
				background-color: #07e36e;
			}

			&.no {
				border-color: #ff5500;
				background-color: rgba(255, 85, 0, .4);
			}
		}
	}
</style>
